<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/style.min.css">
    <title>我的关注</title>
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body>
    <div id="personal_center">
        <div class="t-my-attr-container">
            <header class="cl" v-show="header.show">
                <div class="nav-bar cl">
                    <span class="goback arrow_l" @click="goback"></span>
                    <span class="page-name" v-cloak>{{shop_name}}会员店</span>
                </div>
            </header>
            <div class="t-my-att-main">
                <div class="t-my-att-header">
                    <a href="javascript:void(0)" class="p-left" @click="upDown">
                        <p>价格</p>
                        <p class="left-icons">
                            <i :class="{active:isIconsActive}"></i>
                            <em :class="{active:!isIconsActive}"></em>
                        </p>
                    </a>
                    <a href="javascript:void(0)" class="p-right" @click="openModal">
                        <p>宝贝类目</p>
                        <p class="left-icons">
                            <i :class="{'active':bIconActive}"></i>
                        </p>
                    </a>
                </div>
                <div class="show-modal" v-show="isShow" @click="closeModal($event)">
                    <div class="t-modal">
                        <ul>
                            <li v-for="(item,$index) in leftItems">
                                <a href="javascript:void(0)">
                                    <label for="all" :class="{'active':$index===leftSelected,'commonActive':isLeftComon}" @click="leftSelectedLi($index,item.id)" v-cloak>
                                    {{item.cat_name}}({{item.count}})
                                    <i></i>
                                </label>
                                    <input type="radio" id="all" name="radio_att">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="t-my-att-content">
                    <ul>
                        <li v-for="(item,index) in list">
                            <div class="left-img">
                                <a @click="viewDetail(item.goods_id)">
                                    <div class="soff-shelf" v-if="item.goods && item.goods.validateStatus != 1">已下架</div>
                                    <img :src="item.goods && item.goods.goods_img1" alt="">
                                </a>
                            </div>
                            <div class="t-box-flex">
                                <a @click="viewDetail(item.goods_id)"><strong v-cloak>{{item.goods && item.goods.goods_name}}</strong></a>
                                <p class="box-p">
                                    <span class="t-price" v-cloak>￥{{item.goods && item.goods.min_price}}</span>
                                    <a href="javascript:void(0)" class="cancle-att" @click="cancelAttention(item,index)">取消关注</a>
                                </p>
                            </div>
                        </li>
                    </ul>
                    <p class="loading-tip" v-cloak>{{loading_tip}}</p>
                </div>
            </div>
        </div>
        <toast ref="toast"></toast>
    </div>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>
    <script>
        var toast = component.popup.toast();
        var app = new Vue({
            el: '#personal_center',
            data: function() {
                return {
                    header: {
                        show: !APP.iswechat()
                    },
                    list: [],
                    isloading: false,
                    page: 0,
                    loading_tip: '加载数据中',
                    price_sort: 0,
                    cate_id: '',
                    store_id: APP.getQueryString('storeid'),
                    shop_name: '',
                    isShow: false,
                    isIconsActive: true,
                    bIconActive: false,
                    liActive: true,
                    isLeftComon: true,
                    leftItems: [],
                    leftSelected: -1

                }
            },
            mounted: function() {
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                }.bind(this), function(arg) {
                    this.shop_name = arg.body.data.shop.shop_name;
                }.bind(this));
                this.getData();
                window.addEventListener('scroll', this.scrollLoading);
            },
            destroyed: function() {
                window.removeEventListener('scroll', this.scrollLoading);
            },
            components: {
                'toast': toast
            },
            methods: {
                viewDetail: function(gid) {
                    Vue.http.get(APIPHP + 'index.php?r=goods/index/check&storeid=' + this.store_id + '&id=' + gid, {
                        emulateJSON: true
                    }).then(function(_res) {
                        if (_res.body.error_code == 0) {
                            window.location.href = 'goods-detail.html?storeid=' + this.store_id + '&id=' + gid;
                        } else {
                            this.$refs.toast.show('该商品已下架');
                        }
                    }.bind(this));
                },
                goback: function() {
                    window.history.go(-1);
                },
                getData: function(isscreen) {
                    this.page++;
                    this.isloading = true;
                    var _url = APIPHP + 'index.php?r=member/mysub/index';
                    Vue.http.get(_url + '&price_order=' + this.price_sort + '&storeid=' + this.store_id + '&cateid=' + this.cate_id + '&page=' + this.page, {
                        emulateJSON: true
                    }).then(function(_res) {
                        if (_res.body.error_code == 200) {
                            if (isscreen) {
                                this.list = _res.body.data[0];
                            } else {
                                this.list = this.list.concat(_res.body.data[0]);
                            }

                            this.leftItems = _res.body.data.cate;

                            if (_res.body.data[0].length < 10) {
                                this.loading_tip = '没有更多数据';
                                setTimeout(function() {
                                    window.removeEventListener('scroll', this.scrollLoading);
                                }.bind(this), 100);
                            } else {
                                this.loading_tip = '加载更多数据';
                            }
                        }
                        this.isloading = false;
                    }.bind(this), function(err) {
                        console.log("err")
                    })
                },
                scrollLoading: function() {
                    if (this.isloading) return;
                    if (document.body.scrollHeight - document.body.scrollTop - window.innerHeight < 150) {
                        this.getData();
                    }
                },
                resetStatus: function() {
                    this.page = 0;
                    this.isloading = false;
                    this.list = [];
                    window.removeEventListener('scroll', this.scrollLoading);
                    setTimeout(function() {
                        window.addEventListener('scroll', this.scrollLoading);
                    }, 100);
                },
                cancelAttention: function(item, index) {
                    var _url = APIPHP + 'index.php?r=member/mysub/del&storeid=' + this.store_id + '&id=' + item.id;
                    Vue.http.get(_url, {}, {
                        emulateJSON: true
                    }).then(function(_res) {
                        if (_res.body.flag == 1) {
                            this.list.splice(index, 1);
                        }
                    }.bind(this));
                },
                openModal: function() {
                    if (this.isShow === false) {
                        this.isShow = true;
                    } else {
                        this.isShow = false;
                    }

                },
                closeModal: function(event) {
                    if (event.target.className == "show-modal") {
                        this.isShow = false;
                    }
                },
                upDown: function() {
                    if (this.isloading) return;
                    if (this.isIconsActive === false) {
                        this.isIconsActive = true;
                        this.price_sort = 0;
                    } else {
                        this.isIconsActive = false;
                        this.price_sort = 1;
                    }
                    this.resetStatus();
                    this.getData(true);
                },
                leftSelectedLi: function(index, cat_id) {
                    if (this.leftSelected == index) {
                        this.leftSelected = -1;
                        this.bIconActive = false;
                        this.cate_id = '';
                    } else {
                        this.leftSelected = index;
                        this.bIconActive = true;
                        this.cate_id = cat_id;
                    }
                    this.isLeftComon = false;
                    this.isShow = false;
                    this.resetStatus();
                    this.getData(true);
                }


            }
        })
    </script>
</body>

</html>